在本文中，我们将介绍如何使用 CSS 实现多个顶部固定的 div。在网页设计中，经常需要将某些元素固定在页面的顶部，以便在滚动页面时保持它们的位置。但是，当页面上有多个需要固定的 div 时，我们需要一些特殊的技巧来实现这一点。

阅读更多：CSS 教程

CSS 中的 position 属性有几个可用的值，其中之一是 sticky。使用 sticky 定位可以将元素固定在其容器的指定位置，当页面滚动到该位置时，元素将立即变为 fixed 定位并停留在该位置。

首先，我们需要为每个需要固定的 div 添加一个共同的类名，例如 “top-fixed”。接下来，在 CSS 中，我们为该类名添加以下样式：

这将使带有 “top-fixed” 类名的元素固定在页面顶部。我们还可以使用 z-index 属性来控制元素的层叠顺序，确保它们位于其他内容的上方。

当页面上有多个顶部固定的 div 时，它们可能会互相遮挡。为了解决这个问题，我们需要为每个固定元素的容器添加一些样式，以限制它们的滚动区域。

通过将容器的 overflow-x 设置为 hidden，我们可以防止水平滚动条出现。同时，通过将 overflow-y 设置为 auto，我们可以使容器在需要时显示垂直滚动条。这样，当页面滚动时，只有容器的内容会滚动，而顶部固定的 div 将保持在视觉上的固定位置。

下面是一个示例页面，其中包含了两个顶部固定的 div：

在上面的示例中，我们使用了一个包含了两个容器的页面。每个容器都包含了一个带有 “top-fixed” 类名的 div，该 div 将固定在容器的顶部。容器的高度被限制为 300px，以便在超出容器高度时显示垂直滚动条。

通过使用 CSS 的 position: sticky 属性和限制滚动区域的技巧，我们可以轻松实现多个顶部固定的 div。这种方法非常实用，适用于需要在网页上同时固定多个元素的情况。

需要注意的是，在使用 position: sticky 时，兼容性是需要考虑的因素。一些旧版本的浏览器可能不支持该属性，因此在设计时需要谨慎选择或提供替代方案。